new Vue({
 el:'#gameFilter',
 data:{
   gameList:[],
   gameArr:[],
   gameResultArr:[],
   gameListResult:[],
   roofList:[],
   stateList:[],
   acronymList:[],
   typeList:[],
   areaList:[],
   pageArr:[],
   roof:'PC',
   sort:1,
   state:'全部',
   acronym:'全部',
   gameType:'全部',
   area:'全部',
   pageIndex:1,
 },
 computed:{
  selectList(){
    return [this.state,this.acronym,this.gameType,this.area].filter(item=>(item!='全部'));    
  }
 },
 methods:{
   // 读取数据
   readFile(){
     this.$http.get('./moongoDB/games').then(response =>{
       let res = response.body;
       if(res){
        var roofArr = [];
        this.gameList = res;  
        
        // 获取平台
        // 分割组合
        this.gameList.forEach(item=>{
          roofArr.push(item.roof.split('/'));
        })   
        roofArr = Object.values(roofArr).reduce((a,b) => [...a, ...b], []);
        // 取消重复数据   
        this.roofList = [...new Set(roofArr)];    
        this.filterRoofFile();   
       }
     },response=>{
       console.log('请求数据失败！');  
     });
   },
   
   // 筛选平台
   filterRoofFile(){
      var gameArr = this.gameList;
      // 筛选平台类型
      gameArr = gameArr.filter(item=>(item.roof.indexOf(this.roof)!=-1))
      this.gameArr = gameArr;   
    
      this.initFilterFile();
   },

   initFilterFile(){
    this.gameResultArr = this.gameArr;
    // 最终条件筛选
    this.filterStateFile();
    this.filterAcronymFile();
    this.filterTypeFile();
    this.filterAreaFile();

    this.sortFile();
   },
   
   // 每个筛选方法
  filterStateFile(){
    // 获取状态
    var stateArr = [];
    this.gameResultArr.forEach(item=>{stateArr.push(item.state)});
      // 取消重复数据   
    this.stateList = [...new Set(stateArr)];
    this.stateList.unshift('全部');
    // 筛选
    if(this.state!='全部'){
      this.gameResultArr = this.gameResultArr.filter(item=>(item.state == this.state));
    }  
  },
  filterAcronymFile(){
      // 获取首字母
      var acronymArr = [];
      this.gameResultArr.forEach(item=>{
      var nameTitle = makePy(item.name)[0];
      nameTitle = nameTitle.replace(/[^a-z^A-Z]/ig, "");
      acronymArr.push(nameTitle[0]);
      });
        // 取消重复数据   
      acronymArr = [...new Set(acronymArr)]; 
        // 排序
      this.acronymList = acronymArr.sort(acronymSortBy());
      this.acronymList.unshift('全部'); 
      // 筛选
      if(this.acronym!='全部'){
        this.gameResultArr = this.gameResultArr.filter(item=>{
          var nameTitle = makePy(item.name)[0];
          nameTitle = nameTitle.replace(/[^a-z^A-Z]/ig, "");
          return nameTitle[0] == this.acronym;
        });
      }
  },
  filterTypeFile(){
    // 获取游戏类型
    var typeArr = [];
    this.gameResultArr.forEach(item=>{typeArr.push(item.gameType)});
      // 取消重复数据   
    this.typeList = [...new Set(typeArr)];
    this.typeList.unshift('全部');
    // 筛选
    if(this.gameType!='全部'){
      this.gameResultArr = this.gameResultArr.filter(item=>(item.gameType == this.gameType));
    } 
  },
  filterAreaFile(){
    // 获取游戏产地
    var areaArr = [];
    this.gameResultArr.forEach(item=>{areaArr.push(item.area)});
      // 取消重复数据   
    this.areaList = [...new Set(areaArr)];
    this.areaList.unshift('全部');
    // 筛选
    if(this.area!='全部'){
      this.gameResultArr = this.gameResultArr.filter(item=>(item.area == this.area));
    } 
  },

  sortFile(){
    var gameResultArr = this.gameResultArr.concat(); 
    if(this.sort == 1){
      gameResultArr = gameResultArr.reverse();
    } else if(this.sort == 2){
      gameResultArr = gameResultArr.sort(dateSortBy("year","month","day","name")).reverse();
    } else if(this.sort == 3){
      gameResultArr = gameResultArr.sort(valueSortBy("score","name")).reverse();
    }
    var p = this.pageIndex;
    var l = Math.ceil(gameResultArr.length/5);
    this.pageArr.length = l;
    this.gameListResult = gameResultArr.slice(5*(p-1),5*p);
    
    $('.typeCotainer .typeItem').eq(this.index).html(`${this.roof}游戏<span>${this.gameResultArr.length}</span>`); 

    $('.typeCotainer .typeItem').eq(this.index).siblings().find('span').remove(); 

    scrollTo(0,0);

    // 评分渲染
    setTimeout(function(){
      $('.scoreCotainer').each(function(){
        var score = $(this).attr('data-score');
        
        if(score<=5){ 
          $(this).find('.ring2').css('transform',`rotateZ(-${180-36*score}deg)`)
        }else{    
          $(this).find('.ring1').css('transform',`rotateZ(-${180-36*(score-5)}deg)`)
        }
      })
    },500)  
  },



   toIndexClick(){
     window.location.href=`/`
   },
   typeChangeClick(roof,index){
     this.roof = roof;
     this.state = '全部';
     this.acronym = '全部';
     this.gameType = '全部';
     this.area = '全部';
     this.index = index;
     this.readFile();
   },
   sortChange(sort){
     this.sort = sort;
     this.initFilterFile();
   },
   stateSelectClick(state){   
     this.state = state;
     this.initFilterFile();
   },
   acronymSelectClick(acronym){
    this.acronym = acronym;
    this.initFilterFile();
  },
  typeSelectClick(type){  
    this.gameType = type;
    this.initFilterFile();
  },
  areaSelectClick(area){ 
    this.area = area;    
    this.initFilterFile();
  },
  sortCloseClick(index){
    var indexArr = [];

    [this.state,this.acronym,this.gameType,this.area].forEach((item,index)=>{if(item !='全部') indexArr.push(index)})
    
    var select = ['state','acronym','gameType','area'][indexArr[index]];
    this[select] = '全部';
    this.initFilterFile();   
  },
  toGameInfoClick(_id){
    window.open(`./gameInfo?_id=${_id}`,'_blank');
  }
 },
 

 created(){ 
   this.readFile();
   
   // 游戏平台
   $('.typeCotainer').prepend(`<div v-for="(item,index) in roofList" :class="'typeItem ' + (roof == item ? 'active':'')" @click="typeChangeClick(item,index)">{{item}}游戏<span v-if="index==0">{{gameResultArr.length}}</span></div>`)

   // 选择状态
   $('.sortTextDiv').append(`<span class="active" v-for="(item,index) in selectList" @click="sortCloseClick(index)">{{item}}</span>`)
   // 游戏状态
   $('.state').append(`<span v-for="item in stateList" @click="stateSelectClick(item)" :class="item == state?'active':''">{{item}}</span>`)
   // 游戏首字母
   $('.acronym').append(`<span v-for="item in acronymList" @click="acronymSelectClick(item)" :class="item == acronym?'active':''">{{item}}</span>`)
   // 游戏类型
   $('.type').append(`<span v-for="item in typeList" @click="typeSelectClick(item)" :class="item == gameType?'active':''">{{item}}</span>`)
   // 游戏产地
   $('.area').append(`<span v-for="item in areaList" @click="areaSelectClick(item)" :class="item == area?'active':''">{{item}}</span>`)

   // 游戏列表
   $('.gameList').prepend(`<div class="gameItem" v-for="(item,index) in gameListResult">
      <div class="left" @click="toGameInfoClick(item._id)"><img :src="item.imgUrl" /></div>
      <div class="right">
        <b class="title" @click="toGameInfoClick(item._id)">
        {{item.name}}
        <div style="color:#333; display:inline;padding-left:10px">- {{item.year}}/{{item.month}}/{{item.day}} -</div>
        <div style="color:#6cf; margin:8px 0; height:17px">{{item.eName}}</div>
        </b>
        <div class="content">
          <div>游戏类型：{{item.gameType}}</div>
          <div>游戏产地：{{item.area}}</div>
          <div>游戏状态：{{item.state}}</div>
          <div>游戏官网：<a :href="item.webUrl" target="_blank">链接</a></div>
          <div>开发商：{{item.maker}}</div>
          <div>运营商：{{item.publisher}}</div>
        </div>
        <div class="bottomText">
          <div class="title2">游戏简介</div>
          <div>{{item.content}}</div>
        </div>
        <div class="scoreCotainer" :data-score="item.score">
          <div class="scoreRing">
          <div class="ring1"  style="background-color:rgb(210, 238, 252);transform: rotateZ(0)"  v-if="item.score<=5"></div>
          <div class="ring1"  v-else></div>

          <div class="ring2"  v-if="item.score<=5"></div>      
          <div class="ring2" style="transform: rotateZ(0)" v-else></div>
            <div class="score">{{item.score}}</div>
          </div>
        </div>
      </div>   
   </div>`)

   // 页码
   $('.pageDiv').html(`<li :class="pageIndex == index+1? 'active':''" v-for="(item,index) in pageArr" @click="pageIndex=index+1;sortFile();">{{index+1}}</li>`);
  
 },
 
   
 updated(){   
    
 },
 
});